<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 12px">
      <!-- 查询区域 -->
      <a-form-model :label-col="{ span: 6 }" :wrapper-col="{ span: 17 }" layout="inline" @keyup.enter.native="onQuery">
        <a-form-model-item label="APP名称">
          <a-input v-model="form.apkName" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="版本号">
          <a-input v-model="form.version" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
          <a-button type="primary" @click="onQuery"> 查询 </a-button>
          <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="handleAdd()">新增</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <custom-table
          ref="table"
          rowKey="id"
          :showAlert="false"
          :showSelection="false"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @change="onTableChange"
        >
          <template slot="action" slot-scope="text, record">
            <a-button @click="handleDelete(record)" type="link" style="padding: 0">删除</a-button>
          </template>
        </custom-table>
      </div>
    </a-card>
    <j-modal
      title="新增APP"
      :width="800"
      :visible="visible"
      switchFullscreen
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
    >
      <a-form-model
        ref="ruleForm"
        :model="model"
        :rules="validatorRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-model-item label="APP名称" prop="apkName">
          <a-input v-model="model.apkName" placeholder="请输入APP名称" />
        </a-form-model-item>
        <a-form-model-item label="版本号" prop="version">
          <a-input v-model="model.version" placeholder="请输入正确版本号，如：1.0.0" />
        </a-form-model-item>
        <a-form-model-item label="更新内容" prop="updateContent">
          <a-textarea v-model="model.updateContent" placeholder="请输入更新内容" :auto-size="{ minRows: 6, maxRows: 12 }" />
        </a-form-model-item>
        <!-- <a-form-model-item label="apk文件">
          <j-upload v-model="model.fileList" text="上传apk" bizPath="apk" :number="1" :multiple="false"/>
        </a-form-model-item> -->
      </a-form-model>
    </j-modal>
  </div>
</template>

<script>
import { getAppVersionList, appVersionAdd, appVersionDelete } from '@/api/api.js'
import CustomTable from '@/components/zxd/Table/CustomTable'

export default {
  components: {
    CustomTable,
  },
  data() {
    return {
      loading: false,
      visible: false,
      model: {},
      form: {},
      confirmLoading: false,
      validatorRules: {
        apkName: [{ required: true, message: '请输入APP名称' }],
        version: [{ required: true, message: '请输入版本号' },{ validator: this.checkVersion }],
        updateContent: [{ required: false, message: '请输入更新内容' }],
      },
      columns: [
        {
          title: "序号",
          dataIndex: "order",
          width: 40,
          align: "center",
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize +
              (index + 1)}` //序号分页后连续
        },
        {
          title: 'APP名称',
          dataIndex: 'apkName',
          width: 80,
          align: 'center',
          customRender: (text, record) => {
            return <j-ellipsis value={text} length={10} />
          },
        },
        {
          title: '版本号',
          dataIndex: 'version',
          width: 60,
          align: 'center',
        },
        {
          title: '更新内容',
          dataIndex: 'updateContent',
          width: 200,
          align: 'center',
          customRender: (text, record) => {
            return <j-ellipsis value={text} length={100} />
          },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 80,
          align: 'center',
        },
        {
          title: '操作',
          width: 60,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
    }
  },
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      getAppVersionList(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    handleAdd() {
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    // 导入操作
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          appVersionAdd(this.model)
            .then((res) => {
              if (res.success) {
                this.model = {}
                this.$message.success(res.message)
                this.visible = false
                this.refreshTable()
              } else {
                this.$message.warn(res.message)
              }
            })
            .catch((e) => {
              this.$message.warn('请求失败！')
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleDelete(record) {
      let that = this
      this.$confirm({
        title: '确定删除?',
        onOk() {
          appVersionDelete({ id: record.id })
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.refreshTable()
              } else {
                that.$message.warn(res.message)
              }
            })
            .catch((e) => {
              that.$message.warn('请求失败！')
            })
        },
      })
    },
    checkVersion(rule, value, callback) {
      let reg = /^([1-9]\d|[1-9])(\.([1-9]\d|\d)){2}$/
      if (!reg.test(value)) {
        callback('请输入正确的APP版本号')
      } else {
        callback()
      }
    }
  }
}
</script>
